<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../../styles/common.css"/>
    <link rel="stylesheet" href="../../styles/page.css"/>
    <style>

        .bg-purple {
            border: solid 1px #d8dde3;
            height: 150px;
        }

        .grid-content {
            border-radius: 20px;
            min-height: 36px;
            margin-top: 20px;
        }

        .bg-purple i {
            color: #ffc200;
            margin: 20px 0px 0px 5px;
            font-size: 7rem;
        }

        .right-data h2 {
            margin-left: 1rem;
        }
    </style>
</head>
<body>

<div class="dashboard-container" id="chart-app">
    <div class="container">
        <!-- 显示条件 -->
        <div>
            <template>
                <el-select v-model="value" placeholder="显示范围" class="bsType" @change="checkType">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </div>
        <!-- 大图 -->
        <el-row :gutter="20">
            <!-- 会员 -->
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-row :gutter="20">
                        <el-col :span="10" class="left-i">
                            <i class="el-icon-s-custom"></i>
                        </el-col>
                        <el-col :span="14">
                            <div class="right-data">
                                <h1>{{choose.memberNum}}</h1>
                                <h2>{{chooseData.memberNum}}</h2>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <!-- 收入 -->
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-row :gutter="20">
                        <el-col :span="10" class="left-i">
                            <i class="el-icon-s-order"></i>
                        </el-col>
                        <el-col :span="14">
                            <div class="right-data">
                                <h1>{{choose.income}}</h1>
                                <h2>{{chooseData.income}}</h2>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <!-- 支出 -->
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-row :gutter="20">
                        <el-col :span="10" class="left-i">
                            <i class="el-icon-s-order"></i>
                        </el-col>
                        <el-col :span="14">
                            <div class="right-data">
                                <h1>{{choose.disburse}}</h1>
                                <h2>{{chooseData.disburse}}</h2>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <!-- 盈利 -->
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-row :gutter="20">
                        <el-col :span="10" class="left-i">
                            <i class="el-icon-s-order"></i>
                        </el-col>
                        <el-col :span="14">
                            <div class="right-data">
                                <h1>{{choose.profit}}</h1>
                                <h2>{{chooseData.profit}}</h2>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
        <!-- 折线图 -->
        <div id="chart-container" style="width: 100%; height: 400%;margin-top: 20px"></div>
    </div>


</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vueMax.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<script src="../../plugins/Echarts/echarts.min.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../js/validate.js"></script>
<script src="../../api/costRecord.js"></script>
<script src="../../api/costAndMember.js"></script>

<script>
    new Vue({
        el: '#chart-app',
        data() {
            return {
                nums: '100',
                bsType: 1,
                options: [{
                    value: '1',
                    label: '总计'
                }, {
                    value: '2',
                    label: '上周'
                }, {
                    value: '3',
                    label: '上月'
                }],
                value: '',
                choose: {
                    memberNum: '会员总数',
                    income: '累计收入',
                    disburse: '累计支出',
                    profit: '总盈利',
                },
                chooseData: {
                    memberNum: '',
                    income: '',
                    disburse: '',
                    profit: '',
                },
                dailyData: {
                    dates: [], // 日期数组
                    totalIncome: [], // 每日总收入
                    totalExpense: [], // 每日支出
                    newMembers: [], // 每日新增会员数
                    profit: [] // 每日盈利情况
                }
            };
        },
        mounted() {
            this.initChart();
            this.fetchChartData(3); // 默认加载最近30天的数据
        },
        created() {
            this.init()
            this.user = JSON.parse(localStorage.getItem('userInfo')).username
        },
        methods: {
            async init() {
                const params = {
                    bsType: this.bsType,
                }
                await getCountData(params).then(res => {
                    if (String(res.code) === '1') {
                        this.chooseData = res.data
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },
            initChart() {
                this.chart = echarts.init(document.getElementById('chart-container'));
                // 自动调整图表大小
                window.addEventListener('resize', () => {
                    this.chart.resize();
                });
                this.updateChart();
            },
            updateChart() {
                const options = {
                    title: {
                        text: '每日经营数据统计'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['每日总收入', '每日支出', '每日盈利情况', '每日新增会员数']
                    },
                    xAxis: {
                        type: 'category',
                        data: this.dailyData.dates
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '每日总收入',
                            type: 'line',
                            data: this.dailyData.totalIncome
                        },
                        {
                            name: '每日支出',
                            type: 'line',
                            data: this.dailyData.totalExpense
                        },
                        {
                            name: '每日盈利情况',
                            type: 'line',
                            data: this.dailyData.profit
                        },
                        {
                            name: '每日新增会员数',
                            type: 'line',
                            data: this.dailyData.newMembers
                        }
                    ]
                };
                this.chart.setOption(options);
            },
            async fetchChartData(bsType) {
                const params = {
                    bsType: bsType
                }
                await getChartData(params).then(res => {
                    if (String(res.code) === '1') {
                        this.dailyData = res.data
                        this.updateChart();
                    }
                }).catch(err => {
                    // this.$message.error('加载图表数据失败: ' + err);
                })
            },
            checkType(value) {
                switch (value) {
                    case "1": // 总计
                        this.fetchChartData(3)
                        this.bsType = 1
                        this.init()
                        this.choose.memberNum = '会员总数'
                        this.choose.income = '累计收入'
                        this.choose.disburse = '累计支出'
                        this.choose.profit = '总盈利'
                        break;
                    case "2": // 上周
                        this.fetchChartData(2)
                        this.bsType = 2
                        this.init()
                        this.choose.memberNum = '上周新增'
                        this.choose.income = '上周收入'
                        this.choose.disburse = '上周支出'
                        this.choose.profit = '上周盈利'
                        break;
                    case "3": // 上月
                        this.fetchChartData(3)
                        this.bsType = 3
                        this.init()
                        this.choose.memberNum = '上月新增'
                        this.choose.income = '上月收入'
                        this.choose.disburse = '上月支出'
                        this.choose.profit = '上月盈利'
                        break;
                }
            }
        }
    });
</script>
</body>

</html>
